<template>
	<view class="uv-tabs" :style="[$uv.addStyle(customStyle)]">
		<view class="uv-tabs__wrapper">
			<slot name="left" />
			<view class="uv-tabs__wrapper__scroll-view-wrapper">
				<scroll-view :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation
					class="uv-tabs__wrapper__scroll-view" :show-scrollbar="false" ref="uv-tabs__wrapper__scroll-view">
					<view class="uv-tabs__wrapper__nav" ref="uv-tabs__wrapper__nav" :style="{flex: scrollable ? '' : 1}"
						:class="{'uv-tabs__wrapper__nav-2': versions == '2'}">
						<view class="" v-for="(item, index) in list" :key="index">
							<view class="uv-tabs__wrapper__nav__item" @tap="clickHandler(item, index)"
								:ref="`uv-tabs__wrapper__nav__item-${index}`"
								:style="[{flex: scrollable ? '' : 1},$uv.addStyle(itemStyle)]"
								:class="[from,`uv-tabs__wrapper__nav__item-${index}`, {'active':index == innerCurrent}, item.disabled && 'uv-tabs__wrapper__nav__item--disabled']">
								<slot name="indicator" :content="item">
									<image v-if="from != 'server-item' && versions != '2'" class="icon"
										:src="item.categoryIcon" mode="heightFix">
									</image>
									<text :class="[item.disabled && 'uv-tabs__wrapper__nav__item__text--disabled']"
										class="uv-tabs__wrapper__nav__item__text"
										:style="[textStyle(index)]">{{ item[keyName] }}</text>
								</slot>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<slot name="right" />
		</view>
	</view>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import uvBadgeProps from '@/uni_modules/uv-badge/components/uv-badge/props.js'
	// #ifdef APP-NVUE
	const animation = uni.requireNativePlugin('animation')
	const dom = uni.requireNativePlugin('dom')
	// #endif
	import props from './props.js';
	/**
	 * Tabs 标签
	 * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
	 * @tutorial https://www.uvui.cn/components/tabs.html
	 * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
	 * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
	 * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
	 * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
	 * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
	 * @example <uv-tabs :list="list" :is-scroll="false" :current="current" @change="change"></uv-tabs>
	 */
	export default {
		name: 'uv-tabs',
		emits: ['click', 'change'],
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				firstTime: true,
				scrollLeft: 0,
				scrollViewWidth: 0,
				lineOffsetLeft: 0,
				tabsRect: {
					left: 0
				},
				innerCurrent: 0,
				moving: false,
			}
		},
		watch: {
			current: {
				immediate: true,
				handler(newValue, oldValue) {
					// 内外部值不相等时，才尝试移动滑块
					if (newValue !== this.innerCurrent) {
						this.innerCurrent = newValue
						this.$nextTick(() => {
							this.resize()
						})
					}
				}
			},
			// list变化时，重新渲染list各项信息
			list() {
				this.$nextTick(() => {
					this.resize()
				})
			}
		},
		created() {
			this.innerCurrent = this.type == 'send' ? 999 : 0
		},
		computed: {
			textStyle() {
				return index => {
					const style = {}
					// 取当期是否激活的样式
					const customeStyle = index === this.innerCurrent ? this.$uv.addStyle(this.activeStyle) : this.$uv
						.addStyle(
							this.inactiveStyle)
					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
					if (this.list[index].disabled) {
						style.color = '#c8c9cc'
					}
					return this.$uv.deepMerge(customeStyle, style)
				}
			},
			propsBadge() {
				return uvBadgeProps
			}
		},
		async mounted() {
			this.init()
		},
		methods: {
			setLineLeft() {
				const tabItem = this.list[this.innerCurrent];
				if (!tabItem) {
					return;
				}
				// 获取滑块该移动的位置
				let lineOffsetLeft = this.list
					.slice(0, this.innerCurrent)
					.reduce((total, curr) => total + curr.rect.width, 0);
				// 获取下划线的数值px表示法
				let lineWidth = this.$uv.getPx(this.lineWidth);
				// 如果传的值未带单位+设置了全局单位，则带上单位计算，这样才没有误差
				if (this.$uv.test.number(this.lineWidth) && this.$uv.unit) {
					lineWidth = this.$uv.getPx(`${this.lineWidth}${this.$uv.unit}`);
				}
				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
				// #ifdef APP-NVUE
				// 第一次移动滑块，无需过渡时间
				this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
				// #endif

				// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
				// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
				if (this.firstTime) {
					setTimeout(() => {
						this.firstTime = false
					}, 20);
				}
			},
			// nvue下设置滑块的位置
			animation(x, duration = 0) {
				// #ifdef APP-NVUE
				const ref = this.$refs['uv-tabs__wrapper__nav__line']
				animation.transition(ref, {
					styles: {
						transform: `translateX(${x}px)`
					},
					duration
				})
				// #endif
			},
			// 点击某一个标签
			clickHandler(item, index) {
				// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
				this.$emit('click', {
					...item,
					index
				})
				// 如果disabled状态，返回
				if (item.disabled) return

				if (this.innerCurrent != index) {
					this.innerCurrent = index
					this.$emit('change', {
						...item,
						index,
						innerCurrent: this.innerCurrent
					})
				} else {
					if (this.type == 'send') {
						this.innerCurrent = 999
						this.$emit('change', {
							...item,
							index,
							innerCurrent: this.innerCurrent
						})
					} else {

					}
				}
				// #ifndef APP-NVUE
				this.$nextTick(() => {
					this.resize()
				})
				// #endif
				// #ifdef APP-NVUE
				this.$nextTick(() => {
					// nvue模式下再给点延时，确保万无一失
					this.$uv.sleep(30).then(res => {
						this.resize()
					});
				})
				// #endif
			},
			init() {
				this.$uv.sleep().then(() => {
					this.resize()
				})
			},
			setScrollLeft() {
				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
				const tabRect = this.list[this.innerCurrent]
				// 累加得到当前item到左边的距离
				const offsetLeft = this.list
					.slice(0, this.innerCurrent)
					.reduce((total, curr) => {
						return total + curr.rect.width
					}, 0)
				// 此处为屏幕宽度
				const windowWidth = this.$uv.sys().windowWidth
				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
				let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
					.right) / 2 + this.tabsRect.left / 2
				// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
				this.scrollLeft = Math.max(0, scrollLeft)
			},
			// 获取所有标签的尺寸
			resize() {
				// 如果不存在list，则不处理
				if (this.list.length === 0) {
					return
				}
				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
					this.tabsRect = tabsRect
					this.scrollViewWidth = 0
					itemRect.map((item, index) => {
						// 计算scroll-view的宽度，这里
						this.scrollViewWidth += item.width + 6
						// 另外计算每一个item的中心点X轴坐标
						this.list[index].rect = item
					})
					// 获取了tabs的尺寸之后，设置滑块的位置
					this.setLineLeft()
					this.setScrollLeft()
				})
			},
			// 获取导航菜单的尺寸
			getTabsRect() {
				return new Promise(resolve => {
					this.queryRect('uv-tabs__wrapper__scroll-view').then(size => resolve(size))
				})
			},
			// 获取所有标签的尺寸
			getAllItemRect() {
				return new Promise(resolve => {
					const promiseAllArr = this.list.map((item, index) => this.queryRect(
						`uv-tabs__wrapper__nav__item-${index}`, true))
					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
				})
			},
			// 获取各个标签的尺寸
			queryRect(el, item) {
				// #ifndef APP-NVUE
				// $uvGetRect为uni-ui自带的节点查询简化方法，详见文档介绍：https://www.uvui.cn/js/getRect.html
				// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
				return new Promise(resolve => {
					this.$uvGetRect(`.${el}`).then(size => {
						resolve(size)
					})
				})
				// #endif

				// #ifdef APP-NVUE
				// nvue下，使用dom模块查询元素高度
				// 返回一个promise，让调用此方法的主体能使用then回调
				return new Promise(resolve => {
					dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {
						resolve(res.size)
					})
				})
				// #endif
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

	.uv-tabs {
		&__wrapper {
			@include flex;
			align-items: center;

			&__scroll-view-wrapper {
				flex: 1;
				/* #ifndef APP-NVUE */
				overflow: auto hidden;
				/* #endif */
				border-radius: 20rpx 20rpx 0 0;
			}

			&__scroll-view {
				@include flex;
				// flex: 1;
				height: 80rpx;
			}

			&__nav {
				@include flex;
				position: relative;


				:last-child {
					.uv-tabs__wrapper__nav__item {
						margin-right: 32rpx;
					}
				}

				&__item {
					padding: 12rpx 20rpx 12rpx 76rpx;
					box-sizing: border-box;
					@include flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-weight: 900;
					color: #999B9B;
					line-height: 37rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 3rpx 11rpx 0rpx rgba(224, 224, 224, 0.5);
					border-radius: 30rpx;
					margin-right: 12rpx;
					position: relative;
					top: 8rpx;

					.icon {
						position: absolute;
						height: 60rpx;
						margin-right: 3rpx;
						left: 13rpx;
						top: -6rpx;
						z-index: 11;
					}

					&.active {
						background: linear-gradient(144deg, #CCFA2F 0%, #ABF61A 55%, #A7F517 100%);
						color: #101010;

						&:before {
							content: "";
							width: 0px;
							height: 0px;
							border-top: 10rpx solid #ABF61A;
							border-left: 10rpx solid transparent;
							border-right: 10rpx solid transparent;
							position: absolute;
							bottom: -8rpx;
							right: 50%;
							transform: translateX(50%);
							z-index: 10;
						}

					}

					&.server-item {
						padding: 20rpx 36rpx 20rpx 36rpx;
						box-shadow: none;
						background: #F6F8F7;
						border-radius: 0;
						margin-right: 0;
						top: 0rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 42rpx;

						&.active {
							background: #FFFFFF;
							border-radius: 20rpx 20rpx 0rpx 0rpx;

							&:before {
								display: none;
							}

						}
					}

					&--disabled {
						/* #ifndef APP-NVUE */
						cursor: not-allowed;
						/* #endif */
					}

					&__text {
						font-size: 28rpx;
						color: $uv-content-color;
						font-weight: 900;
						position: relative;
						z-index: 11;

						&--disabled {
							color: $uv-disabled-color !important;
						}
					}
				}

				&__line {
					height: 3px;
					background: $uv-primary;
					width: 30px;
					position: absolute;
					bottom: 2px;
					border-radius: 100px;
					transition-property: transform;
					transition-duration: 300ms;
				}

				&.uv-tabs__wrapper__nav-2 {
					box-sizing: border-box;
					// padding-left: 24rpx;

					.uv-tabs__wrapper__nav__item {
						position: relative;
						padding: 0 24rpx;
						box-shadow: none;
						margin-right: 0;

						&.active {
							background: none;
							color: #101010;

							.uv-tabs__wrapper__nav__item__text {
								font-size: 32rpx;
							}

							&:before {
								content: "";
								display: block;
								border: none;
								width: 48rpx;
								height: 48rpx;
								background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community//tab-active.png');
								background-size: 100%;
								background-repeat: no-repeat;
								position: absolute;
								right: 14rpx;
								bottom: -17rpx;
								transform: translateX(0);
								z-index: 10;
							}

						}
					}
				}
			}
		}
	}
</style>